<template>
    <div class="header">
        <button @click="UPDATA('880')">提交载荷</button>{{msg.name}}
         <button @click="cahnge('hhhhh')">改变数据</button>
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o" @click="tonav(0)">
                <router-link to="/index">首页</router-link>
                </van-tabbar-item>
            <van-tabbar-item icon="search" @click="tonav(1)">
                <router-link to="/mine">限时</router-link>
                </van-tabbar-item>
            <van-tabbar-item icon="friends-o" @click="tonav(2)">
                <router-link to="/mine">标签</router-link>
                </van-tabbar-item>
            <van-tabbar-item icon="setting-o" @click="tonav(3)">
                <router-link to="/mine">我的</router-link>
                </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { mapMutations} from 'vuex'
import { mine } from '../Api/mine/mine'
export default {
    data(){
        return {
            msg:{
                name:'888',
                sex:{
                    time:'00'
                }
            },
            active:3,
            noActivated: false
        }
    },
    methods: {
        // cahnge(val){
        //     this.$store.commit('cahnge')
        //      console.log(val,'/*/*/*/*');
        // },
         ...mapMutations(['cahnge']),
         tonav(e){
            console.log(e);
        },
        UPDATA(val){
            this.msg.name = val
        },
        async getdata(){
            let data = await mine();
            console.log(data);
        },
    },
}
</script>
<style lang="less" scoped>
    .header{
        background-color: #f5f5f5;
        width: 100%;
        height: 50px;
        line-height: 50px;
        .name{
            display: inline-block;
            color: red;
        }
    }
    .router-link-active{
        color: blue;
        text-decoration: none;
    }
    .footer{
        background-color: back;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
    }
</style>